
<template>
    <div>
        <el-row class="top">
            <el-col :span="4">
                <span>店铺管理</span>
            </el-col>
            <el-col :span="2" :offset="18">
                <span>
                    <el-button type="primary" v-if="disabled" @click="edit">编辑</el-button>
                    <el-button type="success" v-else @click="send(storeData)">保存</el-button>
                </span>
            </el-col>
        </el-row>
        <el-form label-width="80px" :disabled="disabled" :model="storeData" ref="storeDatarefer" :rules="rules">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="店铺名称" prop="name">
                            <el-input v-model="storeData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="店铺公告" prop="bulletin">
                            <el-input type="textarea" v-model="storeData.bulletin"></el-input>
                        </el-form-item>
                        <el-form-item label="店铺头像" prop="avatar">
                            <imgUpload v-model="storeData.avatar"/>
                        </el-form-item>
                        <el-form-item label="店铺图片" prop="pics">
                            <storeUpload v-model="storeData.pics"/>
                        </el-form-item>
                        <el-form-item label="配送费" prop="deliveryPrice">
                            <el-input v-model="storeData.deliveryPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="配送时间" prop="deliveryTime">
                            <el-input v-model="storeData.deliveryTime"></el-input>
                        </el-form-item>
                        <el-form-item label="配送描述" prop="description">
                            <el-input v-model="storeData.description"></el-input>
                        </el-form-item>
                        <el-form-item label="店铺评分" prop="score">
                            <el-input v-model="storeData.score"></el-input>
                        </el-form-item>
                        <el-form-item label="销量" prop="sellCount">
                            <el-input v-model="storeData.sellCount"></el-input>
                        </el-form-item>
                        <el-form-item label="活动" prop="supports">
                            <el-checkbox-group v-model="storeData.supports">
                                <el-checkbox :label="'在线支付满28减5'"></el-checkbox>
                                <el-checkbox :label="'VC无限橙果汁全场8折'"></el-checkbox>
                                <el-checkbox :label="'单人精彩套餐'"></el-checkbox>
                                <el-checkbox :label="'特价饮品8折抢购'"></el-checkbox>
                                <el-checkbox :label="'单人特色套餐'"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="营业时间" prop="date">
                            <el-date-picker
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                v-model="storeData.date">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            <el-form-item label="店铺描述" prop="storeDesc">
                <!-- <el-input v-model="storeData.storeDesc">
                </el-input> -->
                    <Editor v-model="storeData.storeDesc" :disabled="disabled"/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { info, edit } from "@/api/store/store.api";
import imgUpload from "./components/imgUpload";
import storeUpload from "./components/storeUpload";
import Editor from "./components/Editor";
export default {
  data() {
    return {
      disabled: true,
      storeData: {
        supports: [],
        pics: []
      },
      disable: true,

      rules: {
        name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
        bulletin: [
          { required: true, message: "请输入店铺名称", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "请上传店铺头像", trigger: "blur" }
        ],
        pics: [{ required: true, message: "请上传店铺图片", trigger: "blur" }],
        deliveryPrice: [
          { required: true, message: "请填写运费", trigger: "blur" }
        ],
        deliveryTime: [
          { required: true, message: "请填写配送时间", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请填写配送描述", trigger: "blur" }
        ],
        score: [{ required: true, message: "请填写店铺评分", trigger: "blur" }],
        sellCount: [
          { required: true, message: "请填写店铺销量", trigger: "blur" }
        ],
        supports: [{ required: true, message: "请选择活动", trigger: "blur" }],

        date: [{ required: true, message: "请选择营业时间", trigger: "blur" }],
        storeDesc: [
          { required: true, message: "请选择营业时间", trigger: "blur" }
        ]
      }
    };
  },
  components: {
    imgUpload,
    Editor,
    storeUpload
  },
  methods: {
    edit() {
      this.disabled = false;
    },
    send(data) {
      this.$refs.storeDatarefer.validate(valid => {
        if (valid) {
          this.disabled = true;
          edit(data).then(res => {
              console.log(res);
              console.log(data);
              
          });
        }
      });
    }
  },
  created() {
    info().then(res => {
      this.storeData = res.data.data;
    });
  }
};
</script>

<style scoped>
.top {
  margin-bottom: 0px;
}
</style>